<template>
	<view class="main">
		<view class="top_box">
			<view class="top_title" v-if="title.length == 0">
				选择添加人（{{list.length ? list.length : 0}}）
			</view>
			<view class="top_title" v-if="title.length > 0">
				{{title}}
			</view>
			<view class="x" @click="close">
				<u-icon name="close" size="40rpx" color="#999999"></u-icon>
			</view>
		</view>
		<search-box @mySearch="mySearch" top="100rpx" class="search"></search-box>
		<view class="box">
			<scroll-view scroll-y="true" style="height: 900rpx;" @scrolltolower="scrolltolower">
				<view v-for="value,key in list" :key="value.userName" v-if="!empty" :class="{'selected':value.check}">
					<view class="list" @click="whickSelected(value,key)">
						<view class="list_left">
							<view class="check">
								<view class="info">
									<small-avatar :nickName="value.userName" :avatar="value.avatar" size="80"
										:sex="0"></small-avatar>
									<view class="p-l-16">
										{{value.userName}}
									</view>
									<view class="p-l-16" style="color: #999999">
										{{ phoneNumber(value.phoneNumber)}}
									</view>
								</view>
							</view>
							<view class="">

							</view>
						</view>
						<view class="list_right">
							<u-image :src="selected" width="50rpx" height="50rpx" v-show="value.check"></u-image>
						</view>
					</view>
				</view>
				<view class="p-t-40 column-center" v-if="empty">
					<view class="">
						<u-image :src="searchEmpty" width="335rpx" height="320rpx"></u-image>
					</view>
					<view class="">
						未查询到相关成员
					</view>
				</view>
				<!-- <empty-team text="未查询到相关成员" :emptyImg="searchEmpty" v-if="empty"></empty-team> -->
				<view style="padding-top: 40rpx;padding-bottom: 80rpx;">
					<u-loadmore :status="status" v-if="!empty" />
				</view>
			</scroll-view>
		</view>

		<view class="sticky">
			<view class="btn_group">
				<view class="new_button" @click="allSelected">
					全部添加人
				</view>
				<view class="my_button" :class="{'inactive':inactive}" @click="confirm">
					确认<span v-if="userCount">({{userCount}})</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pageMixinNorRequest from '@/utils/pageMixinNorRequest.js' //在需要引入的组件中引入
	import {
		getInfo,
		getTeamUserListByTeamId
	} from '@/api/index.js'
	export default {
		mixins: [pageMixinNorRequest],
		props: {
			mytype: {
				default: 1,
				required: false,
				//intoTeam: false,
			},
			title:{
				default: '',
				required: false,
			}
		},
		data() {
			return {
				searchValue: '',
				empty: false,
				searchEmpty: require('@/static/img/search_empty.png'),
				selected: require('@/static/img/Select_Team _Selected@2x.png'),
				unable: require('@/static/img/Members_unable.png'),
				able: require('@/static/img/Members_able.png'),
				// list: [{
				// 		check: false,
				// 		name: '龚明亮',
				// 		phone: '159****1949',
				// 		avatar: '',
				// 	},
				// ],
				checkList: []
			}
		},
		computed: {
			inactive() {
				const b = this.list.every(v => v.check == false)
				return b
			},
			userCount() {
				const arrNumber = this.list.filter(v => v.check == true)
				//console.log(arrNumber);
				if (arrNumber.length < 1) {
					return ''
				} else {
					return arrNumber.length
				}
			},
			phoneNumber(number) {
				return (number) => {
					//135****5841
					if (number && number.length > 0) {
						return number.slice(0, 3) + '****' + number.slice(7, 11)
					}
					return number
				}
			}
		},
		mounted() {
			uni.$on('huanTList', this.getTeam)
		},
		beforeDestroy() {
			uni.$off('huanTList', this.getTeam)
		},
		methods: {
			scrolltolower() {
				this.getTeam()
				//console.log(1231);
			},
			async getMyList(obj) { //请求,这个最好在使用那个组件中使用，这个地方可以扩展接参数
				//例如， {..obj,id:15}
				//console.log(123,teamId);
				//if (this.searchValue.length > 0) {
				const arr = this.$store.state.doc.FilterTeamChoosee
				obj = {
					'searchValue': this.searchValue,
					//'teamId':teamId,
					...obj
				}
				//}
				if (uni.getStorageSync('myTeam')) {
					const teamId = uni.getStorageSync('myTeam').data.id
					obj.teamId = teamId
				}
				//console.log(,'555');
				let res = await getTeamUserListByTeamId(obj)
				console.log(arr);
				if (res.code !== 500) {
					res.rows.forEach(v => {
						v.check = false
						if(arr?.length>0){
							arr.forEach(req=>{
								//console.log(v.userId , req);
								if(v.userId == req.userId){
									v.check = true
								}
							})
						}
					})
				} else { //如果没有团队，跳到创建团队


					// let r = uni.getStorageSync('myTeam')
					// if (r && r?.code == 200) { //选过团队直接进
					// 	this.intoTeam = true
					// 	return
					// } else {
					// 	this.intoTeam = false
					// }
					// uni.navigateTo({
					// 	url:'/pages/team/index'
					// })
				}
				return res
				//this.teamNumber = res.total //单独需要赋值的地方

			},
			mySearch(val) { //搜素按钮
				this.clearPageStatus()
				this.searchValue = val
				this.getTeam()
				//this.getMyList({...obj,'searchValue': val})
				//this.empty = true     //空列表
				//console.log(val); //
			},
			whickSelected(value, key) {
				if (this.mytype == 1) {
					this.list.forEach(v => v.check = false)
				}
				this.list[key].check = !this.list[key].check
				//this.checkList = this.$u.deepClone(this.list) 
				
				//console.log(value,key);
			},
			allSelected() {
				this.list.forEach(v => {
					v.check = true
				})
				this.$emit('confirm', this.list)
			},
			confirm() {
				//console.log(this.list);
				let arr = this.list.filter(v=>v.check == true)
				this.$store.commit('FilterTeamChoose', arr)
				this.$emit('confirm', this.list)
			},
			close() {
				this.$emit('close', this.list) //关闭是false 打开是true
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #F8F8F8;
		position: relative;
		//min-height: 100vh;
		.top_box {
			position: relative;
			padding-top: 40rpx;

			.top_title {
				position: absolute;
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
				line-height: 38rpx;
				text-align: center;
				z-index: 2;
			}

			.x {
				position: absolute;
				right: 40rpx;
				z-index: 2;
			}
		}

		.search {
			position: absolute;
			z-index: 971;
			top: 0;
		}

		.box {
			padding: 170rpx 0 160rpx 0;

			.list {
				padding: 0 24rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px solid #E8E8E8;
				padding-bottom: 40rpx;
				padding-top: 20rpx;

				.list_left {
					.check {
						display: flex;
						align-items: center;

						.info {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #212121;
							line-height: 38rpx;

							.avatar {
								background-color: #4DC0D9;
								border-radius: 50%;
								width: 80rpx;
								height: 80rpx;
							}
						}
					}
				}

				.list_right {}
			}
		}

		.sticky {
			width: 100%;
			padding: 20rpx 24rpx 30rpx 24rpx;
			position: fixed;
			z-index: 1000;
			bottom: 0;
			padding-bottom: 80rpx;
			background-color: #FFFFFF;

			.btn_group {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.my_button {
					flex-shrink: 0;
					background-color: #4DC0D9;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
					text-align: center;
					padding: 20rpx 0;
					border-radius: 20rpx;
					width: 352rpx;
				}

				.new_button {
					flex-shrink: 0;
					background-color: #A6DFEC;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: white;
					line-height: 38rpx;
					text-align: center;
					padding: 20rpx 90rpx;
					border-radius: 20rpx;
				}
			}
		}

		.inactive {
			background-color: #A6DFEC !important;
		}
	}

	.selected {
		background-color: #F4FDFF;
	}
</style>